<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../文件/vue.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="app">
        <p v-if="isString">有效字符串</p>
        <p v-if="nString">无效字符串</p>
        <p v-if="isNum">有效数值</p>
        <p v-if="nNum">无效数值</p>
        <p v-if="isObj">有效对象</p>
        <p v-if="nObj">无效对象</p>
        <p v-if="bool">布尔类型</p>
    </div>
	<script>
        let v1 = new Vue({
            el: '#app',
            data:{
                isString:"张三",
                nString:undefined,
                isObj:{
                    userName:"aaa",
                },
                nObj:null,
                isNum:3,
                nNum:NaN,
                bool:true
            }
        });
    </script>



<div id="box">
    <div class="box1" v-if="num==true">div1</div>
    <div class="box2" v-if="num==false">div2</div>
    <button v-on:click="change">切换</button>
     <br/> <br/> <br/>
</div>
<script>
    let v2 = new Vue({
        el: '#box',
        data:{
            num:true
        },
        methods:{
            change() {
                this.num = !this.num;
                console.log(this.num)
            }
    }
});
</script>
<style>
    .box1{
        
        width: 100px;
        height:100px;
        background-color: green;
    }
    .box2{
        
        width: 100px;
        height:100px;
        background-color: red;
    }
</style>



<!-- 定义2种用户登陆界面，允许用户通过按钮切换不同的登录方式 -->
<div id="login">
    <template v-if="loginType">
        <label>账号登陆：</label><br>
        <input placeholder="输入账号、密码"><br>
    </template>

    <template v-else>
        <label>手机登陆：</label><br>
        <input placeholder="输入手机号、验证码"><br>
    </template>

    <button @click="changeLogin">切换登陆方式</button>
</div><br><br>
<script>
    let v3 = new Vue({
        el: '#login',
        data:{
            loginType:true
        },
        methods:{
            changeLogin:function(){
                this.loginType = !this.loginType;
            }
        }
    });
</script>

<div id="login1">
    <div v-if="loginType">
        <label>用户昵称：</label>
        <input placeholder="设置新昵称"><br>
        <label>账号密码：</label>
        <input placeholder="设置新密码"><br>
        <label>QQ邮箱验证码：</label>
        <input placeholder="输入QQ邮箱验证码" key="QQ-code">
    </div>

    <div v-else>
        <label>用户昵称：</label>
        <input placeholder="设置新昵称"><br>
        <label>账号密码：</label>
        <input placeholder="设置新密码"><br>
        <label>微信好友验证码：</label>
        <input placeholder="输入微信好友验证码" key="WeChar-code">
    </div>

    <button @click="changeLogin">切换注册方式</button>
</div><br><br>
<script>
    let v4 = new Vue({
        el: '#login1',
        data:{
            loginType:true
        },
        methods:{
            changeLogin:function(){
                this.loginType = !this.loginType;
            }
        }
    });
</script>



<div id="student">
    <ul>
        <li v-for="(item,index) in studentArr">
            {{index+1}}.&nbsp;&nbsp;
            <a v-for="(value,name) in item">{{name}}:{{value}}&nbsp;&nbsp;</a>
        </li>
    </ul>
</div>
<script>
    let v5 = new Vue({
        el: '#student',
        data:{
        	 studentArr:[
                   	{
                        姓名:"张三",
                        年龄:18,
                        性别:"男"
                    },
                    {
                        姓名:"李四",
                        年龄:19,
                        性别:"男"
                    },
                    {
                        姓名:"王五",
                        年龄:16,
                        性别:"女"
                    },
                ],
        }
    });
</script>



</body>
</html>